<template>
  <div class="withdrawal flex-h__1">
    <div class="withdrawal-content">
      <div class="withdrawal-content__title flex-row-start align-center text-333 text-36">
        <img src="../assets/withdrawal/price.png" class="withdrawal-content__title-icon m-r-10"/>
        <div class="text-28">提现金额</div>
      </div>
      <div class="withdrawal-content__input">
        <div class="flex-row-start align-center">
          <span class="text-333 text-bold"></span>
          <input v-model.number="data.amout" class="flex-w__1 withdrawal-content__input-info text-333 text-bold" type="number">
          <div class="withdrawal-content__input-btn m-l-20" @click="data.amout = data.totalAmout">全部提现</div>
        </div>
        <div class="text-999 text-28">可用余额：{{ data.totalAmout }}</div>
      </div>

    </div>
  </div>
  <div class="footer media">
    <div class="footer-btn text-center text-32" @click="confirmHandler">申请提现</div>
    <p class="footer-btn__line text-center text-32" @click="goUrl('/withdraw')">提现申请记录</p>
  </div>
</template>

<script setup>
  import { reactive, ref, onBeforeMount } from 'vue'
  import { useRouter } from 'vue-router'
  import { showFailToast, showLoadingToast, showSuccessToast } from 'vant';
  import { ApplyWithdraw, UserInfo } from '@/config/api.js'

  const router = useRouter()
  const data = reactive({
    totalAmout: 0,
    amout: '',
    type: 'bankcard'
  })
  const bankData = ref({})
  const withdrawDest = ref([])

  onBeforeMount(() => {
    let query = router.currentRoute.value.query
    data.id = query.id
    data.payType = query.payType
    // withdrawDest.value = query ? JSON.parse(query) : []
    getAmout()
    // let bank = sessionStorage.getItem('SELECT_BANK')
    // if (bank) {
    //   bankData.value = JSON.parse(bank)
    //   sessionStorage.removeItem('SELECT_BANK')
    // } else {
    //   walletVirtualBankCard().then(data => {
    //     bankData.value = data.data[0] || {}
    //   })
    // }
  })

  const getAmout = () => {
    UserInfo().then(res => {
      data.totalAmout = res.user.jf || 0
    })
  }

  const confirmHandler = () => {
    if (!data.amout) {
      showFailToast('请输入提现金额')
      return
    }
    // if (data.amout > data.totalAmout) {
    //   showFailToast('提现金额不能大于余额')
    //   return
    // }
    
    showLoadingToast()
    ApplyWithdraw({
      amount: data.amout,
      id: data.id,
      payType: data.payType
    }).then(data => {
      showSuccessToast('提现成功')
      getAmout()
      goUrl('/withdraw')
    })
  }

  const goUrl = (url) => {
    router.push(url)
  }
</script>

<style lang="less" scoped>

.withdrawal{
  background: #F7F7F7;
  padding: 0.40rem 0.40rem 4.00rem 0.40rem;
  overflow: auto;
  .withdrawal-content{
    width: 100%;
    background: #FFFFFF;
    border-radius: 0.27rem;
    padding: 0.40rem;
  }
  .withdrawal-content__title-icon{
    width: 0.53rem;
    height: 0.49rem;
  }

  .text-yellow{
    color: #E7451B;
  }

  .withdrawal-content__input{
    border-bottom: 0.01rem solid #EDEDED;
    padding: 0.40rem 0 0.27rem;
    font-size: 0.96rem;
    .withdrawal-content__input-info{
      border: none;
    }
    .withdrawal-content__input-btn{
      width: 1.91rem;
      height: 0.69rem;
      line-height: 0.69rem;
      border: 0.01rem solid var(--color-primary);
      border-radius: 0.35rem;
      font-size: 0.37rem;
      color: var(--color-primary);
      text-align: center;
    }
  }

  .withdrawal-item{
    width: 8.40rem;
    background: #F7F7F7;
    border: 0.03rem solid #F7F7F7;
    border-radius: 0.28rem;
    position: relative;
    overflow: hidden;
    transition: all .2s;
    &.active{
      border: 0.03rem solid var(--color-primary);
      background: #FAFBFF;
      &::before{
        position: absolute;
        content: "";
        width: 0.85rem;
        height: 0.85rem;
        right: 0;
        bottom: 0;
        background: url('../assets/withdrawal/active.png') no-repeat;
        z-index: 20;
        background-size: 100% 100%;
      }
    }
    .withdrawal-item__icon{
      width: 1.00rem;
      height: 1.00rem;
    }
  }
}
.footer{
  width: 100%;
  height: 3.68rem;
  background: #fff;
  position: fixed;
  bottom: 0;
  .footer-btn{
    width: 8.40rem;
    height: 1.20rem;
    line-height: 1.20rem;
    background: var(--color-primary);
    border-radius: 0.27rem;
    margin: 0.67rem auto 0.53rem;
    color: white;
  }
  .footer-btn__line{
    color: var(--color-primary);
  }
}
</style>
